<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
</head>
<body>

	<!-- 上侧栏 -->
	<div class="demoTable">
		名字：
		<div class="layui-inline">
			<input class="layui-input" id="searchName"/>
		</div>
		副标题：
		<div class="layui-inline">
			<input class="layui-input" id="searchSubtitle"/>
		</div>
		
	  <button class="layui-btn" data-type="search">搜索</button>	
	  <button class="layui-btn" data-type="deleteAll">批量删除</button>
	  <button class="layui-btn" data-type="add">添加</button>
	</div>
	
	<!-- 加右侧工具条别忘记加 lay-filter="tableFilter" -->
	<table id="tableId" lay-filter="tableFilter"></table>
	
	<!-- 右侧栏 -->
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<!-- 把商品的状态更改为文字 -->
	<script type="text/html" id="statusTpl">
		 {{#  if(d.status == 1){  }}
		 	           上架
		 {{#  } else {            }}
				  下架
		 {{#  }					  }}
	</script>
	<!-- 读取存入的图片 -->
	<script type="text/html" id="mainImageTpl">
		 <img src="/uploadimg/{{d.mainImage}}"/>
	</script>	

	<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx}/static/common/mylayer.js"></script>
	<script src="${ctx}/static/common/util.js"></script>
	<script src="${ctx}/static/lib/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use(['table','laydate'], function() {
			var table = layui.table;
			
			table.render({
			    elem: '#tableId'
			    ,url: '${ctx}/product/pageList.action' //数据接口
			    ,page: true //开启分页
			    ,id : "layUITableId" //设定容器唯一ID，id值是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引
			    ,cols: [[ //表头
			      {type:'checkbox', fixed: 'left'}//加选择框        
			      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
			      ,{field: 'categoryId', title: '分类id', width:80}
			      ,{field: 'name', title: '商品名称', width:260, sort: true}
			      ,{field: 'subtitle', title: '商品副标题', width:200} 
			      ,{field: 'mainImage', title: '产品主图', templet:"#mainImageTpl"}//展示图片
			      ,{field: 'price', title: '价格', width: 80, sort: true}
			      ,{field: 'stock', title: '库存数量', width: 80}
			      ,{field: 'status', title: '商品状态', templet:"#statusTpl"} //商品状态
			      ,{field: 'createTime', title: '创建时间', width: 135, sort: true}
			      ,{field: 'updateTime', title: '更新时间', width: 135, sort: true}
			      ,{fixed: 'right', width: 178, toolbar : "#barDemo"}//添加右侧栏
			    ]]
			  });
			
			  //监听工具条
			  //tool是工具条事件名，tableFilter是table容器属性lay-filter="tableFilter"对应的值
			  table.on('tool(tableFilter)', function(obj){
			    var data = obj.data;//获得当前行数据,json格式对象
			    var layEvent = obj.event;//获得lay-event对应的值
			    if(layEvent === 'detail'){
			      layer.msg('ID：'+ data.id + ' 的查看操作');
			    } else if(layEvent === 'del'){
			      layer.confirm('确定删除吗', function(index){
			    	$.ajax({
			    		url:"${ctx}/product/deleteById.action",
			    		data:{"id":data.id},//后台拿到id进行删除操作
			    		dataType:"json",
			    		success:function(resp) {
			    			if(resp.code == util.SUCCESS){
			    				mylayer.success(resp.msg);
			    				table.reload("layUITableId"); //加上容器唯一ID，删除后刷新页面
			    			} else {
			    				mylayer.errorMsg(resp.msg);
			    			}
				        layer.close(index);
			    		}
			    	});
			      });  //修改
			    } else if(layEvent === 'edit'){
			    	update(data);
			    }
			});
			  
			 
			  var active = {
					//批量删除
				    deleteAll: function(){ //获取选中数据
				       var checkStatus = table.checkStatus('layUITableId')
				       var data = checkStatus.data;
				       console.log(data);//选中行的数据
				       console.log(checkStatus.data.length);//获取选中行的数量
				       console.log(checkStatus.isAll);//表格是否全选
				       var ids = util.getSelectedIds(data); //封装了工具类转换成字符串"1,2,3"
				       console.log(ids);
				       layer.confirm('确定删除吗？', function(index){
					    	$.ajax({
					    		url:"${ctx}/product/deleteAll.action",
					    		data:{"ids":ids},
					    		dataType:"json",
					    		success:function(resp) {
					    			if(resp.code == util.SUCCESS){
					    				mylayer.success(resp.msg);
					    				table.reload("layUITableId");
					    			} else {
					    				mylayer.errorMsg(resp.msg);
					    			}
						        layer.close(index);
					    		}
					    	});
					   });
				    },//删除完
				    //搜索  
				    search : function(){
				    	table.reload('layUITableId',{
				    		where : { //设定异步数据接口的额外参数，任意设置
				    			name : $("#searchName").val(),
				    			subtitle : $("#searchSubtitle").val()
				    		}
					    	,page : {
					    		curr : 1 //从第一页开始
					    	}
				    	});
				    },
				    add : function(){
				    	location.href = "${ctx}/product/getAddPage.action"
				    }
				  };
				 
			  	  //修改
				  function update(data){
					var id =  data.id;
					var categoryId = data.categoryId;
					console.log(categoryId);
					console.log(id);
					 location.href = "${ctx}/product/getUpdatePage.action?id=" + id + "&categoryId=" + categoryId;
				  }
				  
				  $('.demoTable .layui-btn').on('click', function(){
					   var type = $(this).data('type');
					   active[type] ? active[type].call(this) : '';
				   });
		});
	</script>
</body>
</html>